<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="消息中心" />
    </template>
    <view class="content">
      <view class="list">
        <view
          @click="toDetail(index)"
          class="item flex flex-a"
          v-for="(item, index) in list"
          :key="index"
        >
          <image
            :src="require(`../../../assets/images/message/${item.type}.png`)"
          ></image>
          <view class="right f1">
            <view class="f1 flex flex-bt flex-a">
              <view class="c-90 fs-32 bold">{{ item.title }}</view>
              <text class="c-40 fs-24">{{ item.date }}</text>
            </view>
            <view class="desc ellipsis">{{ item.desc }}</view>
          </view>
        </view>
      </view>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      list: [...new Array(20)].map((_, i) => {
        return {
          type: (i % 4) + 1,
          title: "标题-" + i,
          desc: "这里是系统消息这里是系统消息这里是系统消息这里是系统消息这里是系统消息这里是系统消息这里是系统消息",
          date: "2024-12-12 :12.23",
        };
      }),
    };
  },
  methods: {
    toDetail(id){
        uni.navigateTo({
            url: `/pages/mine/message/detail?id=${id}`
        })
    }
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  padding: 32rpx;
  min-height: 100%;
  background: #f7f8ff;
  .list {
    height: 100%;
    overflow: scroll;
    .item {
      padding: 32rpx;
      border-radius: 16rpx;
      background: #ffffff;
      margin-bottom: 32rpx;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      image {
        width: 96rpx;
        height: 96rpx;
        flex-shrink: 0;
        margin-right: 32rpx;
      }
      .desc {
        width: 100%;
        margin-top: 4rpx;
      }
      .right {
        width: calc(100% - 128rpx);
      }
    }
  }
}
</style>
